<template>
    <div class="usersBox flex justify-center align-center flex-direction">
        <h1>本站用户</h1>
        <div class="usersCoreBox flex justify-center align-start wrap">
            <vs-avatar-group max="10">
                <vs-avatar v-for="(u,ui) in users" :key="u.id">
                    <img v-lazy="u.avator">
                </vs-avatar>
            </vs-avatar-group>
        </div>
    </div>
</template>
<script>
export default{
    props:{
        users:{
            type:Array,
            value:[]
        }
    }
}
</script>
<style lang="scss" scoped>
    .usersBox{
        width:100%;
        padding-bottom:50px;
        h1{
            margin-bottom: 30px;
            color:var(--black);
        }
        .usersCoreBox{
            width:1200px;
            height:100%;
            background:rgba(255, 255, 255, 0.205);
            border-radius: 20px;
            padding:0
        }
    }
    @media screen and (min-width:0px) and (max-width:1280px) {
        .usersBox{
            width:100%;
            padding-bottom:2rem;
            h1{
                margin-bottom: 2rem;
                color:var(--black);
            }
            .usersCoreBox{
                width:100%;
                height:100%;
                background:rgba(255, 255, 255, 0.205);
                border-radius: 0rem;
                padding:0 2rem;
            }
        }
    }
</style>